<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <div class="main">
      <van-cell-group>
        <van-cell title="房源信息" title-style="color:#21b97a" />
        <van-cell title="小区名称" :value="values" is-link to="/search" />
        <van-cell title="租  金" value="￥/月">
          <input
            slot="label"
            type="text"
            placeholder="请输入租金/月"
            v-model.number="body.price"
          />
        </van-cell>
        <van-cell title="建筑面积" value="m²">
          <input
            slot="label"
            type="text"
            placeholder="请输入租金/月"
            v-model.number="body.size"
          />
        </van-cell>
        <Cell
          @setChoice="setType"
          :title="'户 型'"
          :pop="houseParamsList.roomType"
        ></Cell>
        <Cell
          @setChoice="setFloor"
          :title="'所在楼层'"
          :pop="houseParamsList.floor"
        ></Cell>
        <Cell
          @setChoice="setOriented"
          :title="'朝 向'"
          :pop="houseParamsList.oriented"
        ></Cell>
        <div class="cell-ipt">
          <van-cell title="房屋标题" />
          <input
            type="text"
            v-model="body.title"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          />
        </div>
        <div class="cell-ipt">
          <van-uploader v-model="fileList" multiple :after-read="afterRead" />
        </div>
        <div class="cell-ipt">
          <van-cell title="房屋配置" />
          <van-grid :column-num="5" >
            <van-grid-item
               ref="grids"
              v-for="(item, index) in houseParamsList.supporting"
              :key="index"
              icon="photo-o"
              :text="item.label"
              :class="{active:isActive}"
              @click="supportingFn(item.label,index)"
              :clickable="true"
            />
          </van-grid>
        </div>
        <div class="cell-ipt">
          <van-cell title="房屋描述" />
          <textarea
            style="resize: none"
            placeholder="请输入房屋描述信息"
            v-model="body.description"
          ></textarea>
        </div>
      </van-cell-group>
    </div>
    <div class="choice">
      <button id="esc" @click="clearFn">清除</button>
      <button id="sure" @click="sendPublishFn">确定</button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import Cell from './Child/Cell.vue'
import fileImg from '@/accept/file.png'
import { publishHouseApi, HouseParamsApi, HouseImgApi } from '@/api'
export default {
  components: {
    Cell
  },
  data () {
    return {
      isActive: false,
      columns: [],
      show: false,
      values: this.$route.query.communityName || '请输入小区名称',
      img: fileImg,
      imgArr: [],
      fileList: [],
      textList: [],
      body: {
        title: '', // 标题
        description: '', // 描述
        houseImg: '', // 房屋图片
        oriented: '', //
        supporting: '', // 配置
        price: '', // 价格
        roomType: '', // 房屋类型
        size: '', // 大小
        floor: '', // 楼层
        community: this.$route.query.community || '' //
      },
      houseParamsList: []
    }
  },
  methods: {
    supportingFn (val, index) {
      // console.log(val)
      if (this.$refs.grids[index].$el.style.color !== 'rgb(28, 182, 118)') {
        this.$refs.grids[index].$el.style.color = '#1cb676'
        this.textList.push(val)
      } else {
        this.$refs.grids[index].$el.style.color = '#333'
        this.textList = this.textList.filter(item => item !== val)
      }
      // console.log(this.textList)
      this.body.supporting = this.textList.join('|')
      console.log(this.body.supporting)
    },
    clearFn () {
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源?',
        confirmButtonText: '继续编辑',
        confirmButtonColor: '#108ee9',
        cancelButtonText: '放弃'
      }).catch(() => {
        // on cancel
        this.$router.back()
      })
    },
    setType (val) {
      this.body.roomType = val
    },
    setFloor (val) {
      this.body.floor = val
    },
    setOriented (val) {
      this.body.oriented = val
    },
    async sendPublishFn () {
      const res = await publishHouseApi({
        body: this.body,
        token: this.$store.state.token
      })
      console.log(res)
    },
    choiceImgFN () {
      this.$nextTick(() => {
        this.$refs.iptFile.click()
      })
    },
    async afterRead () {
      console.log(this.fileList)
      this.imgArr = []
      this.fileList.forEach(async item => {
        const fd = new FormData()
        fd.append('file', item.file)
        const res1 = await HouseImgApi(fd)
        this.imgArr.push(res1.data.body[0])
        this.body.houseImg = this.imgArr.join('|')
        // console.log(this.body.houseImg)
      })
    }
  },
  async created () {
    const res = await HouseParamsApi()
    this.houseParamsList = res.data.body
    // console.log(res.data.body)
  }
}
</script>

<style lang="less" scoped>
.main {
  padding-bottom:40px;
  background-color: #f3f3f3;
}
/deep/.van-cell__title {
  flex: 30%;
  display: flex;
  justify-content: space-between;
  .van-cell__label {
    input {
      border: none;
      &::placeholder {
        color: #b1b1b1;
      }
    }
  }
}
.cell-ipt {
  img {
    margin: 10px;
  }
  input,
  textarea {
    width: 345px;
    border: none;
    margin: 10px;
    font-size: 14px;
    &::placeholder {
      color: #b1b1b1;
    }
  }
  textarea {
    height: 128px;
  }
}
.choice {
  width: 375px;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  justify-content: space-around;
  #sure {
    flex: 1;
    height: 50px;
    line-height: 50px;
    background-color: #1cb676;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border: none;
  }
  #esc {
    flex: 1;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #21b97a;
    text-align: center;
    border: none;
  }
}
</style>
